#@layoutT("功能")
#define css()
<style type="text/css"> 

/** 树图标样式 */
body .layui-tree-skin-skin .layui-tree-branch{
	color: #00C5CD;
}
/** 隐藏树图标 */
.layui-tree-branch/*, .layui-tree-leaf ,.layui-xtree-icon-null  */{
    display: none;
}  
#maingrid {
	border: none;
}

.l-accordion-header{
	display:none;
}
.div-scroll{
	overflow:auto;
	border:1px solid #DCDCDC;
	height: 595px;
	position: relative;
	min-width:345px;
}
	
.function_content{
	border:1px solid #DCDCDC;
	height: 595px;
	overflow: auto;
	position: relative;
}
.func_tree{
	height:563px; 
	overflow: auto;
	border:1px solid #DCDCDC;
	margin:0px 1px;
}
.l-layout-header {
    position: relative;
    padding-left: 10px;
    color: #183152;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    background: #E5EFFE;
    overflow: hidden;
    cursor: pointer;
}
.cite{
   color:#5FB878;
}
.disabled{
	color:#BDBDBD;
}

.disabled[lay-skin="primary"] span {
    color: 	#BDBDBD;
}

</style>
#end

#define main()

	<div id='container' class="layui-row">	
	<div class="layui-col-xs12 layui-col-sm4 layui-col-md3 div-scroll" position="left" id="accordion1"> 
		 <div class="l-layout-header" onclick="">角色菜单
		   <div class="layui-btn-group" style="float: right">
		   		#if(vs.funcMap.get('sys_role_add'))
				<button id='addBtn_' class="layui-btn layui-btn-normal layui-btn-sm">
				  <i class="layui-icon">&#xe608;</i> 新增
				</button>
				#end
				#if(vs.funcMap.get('sys_role_update'))
				<button id='updateBtn_' class="layui-btn layui-btn-normal layui-btn-sm">
				  <i class="layui-icon">&#xe642;</i> 修改
				</button>		
				#end
				<button id='userBtn_' class="layui-btn layui-btn-normal layui-btn-sm">
				  <i class="layui-icon">&#xe770;</i> 用户
				</button>
				#if(vs.funcMap.get('sys_role_delete'))
				<button id='deleteBtn_' class="layui-btn  layui-btn-normal layui-btn-sm">
				  <i class="layui-icon">&#xe640;</i> 删除
				</button>			
				#end
		</div>
		 </div>
         <div class="l-scroll"style="left: 0px;top: 0px;">
             <ul id="leftLayout" style="margin-top:0px;margin-bottom:10px;">
             </ul>
         </div>
     </div>
        
	<div class="layui-col-xs12 layui-col-sm8 layui-col-md9 function_content" id="maingrid" position='center'>
      <form class="layui-form" action="">
      
        <div class="l-layout-header" style="margin:0px;height:30px">
         <div class="layui-col-xs4">
            <span id="roleName" style="color:#5FB878">#(projectName)</span>
           <label>角色权限：</label>
         </div>
         <div class="layui-col-xs8  layui-btn-group">
         #if(vs.funcMap.get("sys_role_save_function"))
           <button id='saveRoleFunc'type="button" lay-submit class='layui-btn layui-btn-green layui-btn-xs' value="Submit">
			<i class="layui-icon">&#xe605;</i>	保存
		  </button>
		  #end		  
		  </div>
        </div>
        <div id="layui-xtree-demo1" class="func_tree"></div>

      </form>
    </div>
	
  </div>
  
#end

#define js()
<script type="text/javascript">
var leftOtions,rightOption,leftNodes,rightNodes,roleName="#(projectName)",roleCode="sys",treeNodes,index;
var projectName="#(projectName)";

function setHeight(){
	var height=$(window).height()-5;
	var width =$('#container').width();
	var col3=$('#accordion1').width();

	$("#accordion1").css("height",height);
	$("#maingrid").css("height",height);
	if(col3<=345){
		$("#maingrid").css("width",width-col3-2);		
	}
	
	$(".func_tree").css("height",height-32);
	
}
var option={
	end : function() {
		  reloadRole();
	}
}

$(function(){
	queryRoleTree();
	queryFuncTree();
	setHeight();
	
	$(window).resize(function(){
		setHeight();
	});
	
	$("#addBtn_").click(function(){
		var url='#(path)/portal/core/sysRole/add?roleCode='+roleCode;
		openDialog("添加角色",url,false,null,null,option);
	});
	
	$("#updateBtn_").click(function(){
		if(roleCode=="sys"){
			layer.msg("请选择角色");
			return;
		}
		var url='#(path)/portal/core/sysRole/edit?roleCode='+roleCode;
		openDialog("修改-"+roleName,url,false,null,null,option);
	});
	
	$("#userBtn_").click(function(){
		if(roleCode=="sys"){
			layer.msg("请选择角色");
			return;
		}
		var url='#(path)/portal/core/sysRole/roleUser?roleCode='+roleCode+"&roleName="+roleName;
		openDialog("配置角色用户",url,false,null,null);
	});
	
	$("#deleteBtn_").click(function(){	
		if(roleCode=="sys"){
			layer.msg("请选择要删除的角色");
			return;
		}
		if(roleCode=="superadmin"||roleCode=="admin"){
			layer.msg("不能删除"+roleName);
			return;
		}
		layer.confirm('确定要删除 '+roleName+' 吗？', function(index) {
			$.ajax({
				url:"#(path)/portal/core/sysRole/delete?roleCode="+roleCode,
				type:"POST",
				success:function(data){
					reloadRole();	
				}
			});
			layer.close(index);
		});
	});
	
});

function closeIndex(){
	layer.close(index);
}

//查询所有角色菜单并生成树
function queryRoleTree(){
	leftNodes="";
	$.ajax({
		url:"#(path)/portal/core/sysRole/userRoleTree",  
	    type:"POST", 
	    data: {
	    },
	    success:function(data){
	    	if(data.length>0){
	    		var treeNode=data[0];
	    		showLeftTree(treeNode,0);
	    		leftTree();
	    	}
	    }	
	});
}

//查询所有功能菜单并生成树
function queryFuncTree(){
	rightNodes="";
	$.ajax({
		url:"#(path)/portal/core/sysFunc/tree",  
	    type:"POST", 
	    data: {
	    },
	    success:function(data){
	    	if(data.length>0){
	    		var treeNode=data[0];
	    		treeNodes=treeNode;
	    		showRightTree(treeNode,0);
	    		rightTree();
	    	}
	    }	
	});
}

//构造角色树节点
function showLeftTree(treeNode,num){
  	var id=treeNode.id;
	var text=treeNode.text;
	if(num!=0){
		leftNodes+=",";
	}
	leftNodes+="{title:'"+text+"',spread:true,id:'"+id+"',children:[";
	var children=treeNode.children;
	if(children!=null&&children.length>0){
		for(var i=0;i<children.length;i++){
			showLeftTree(children[i],i);
		}
	}
	leftNodes+="]}";
}

//构造功能树节点
var n=0;
function showRightTree(treeNode,num){
  	var a=0;
  	var id=treeNode.id;
	var text=treeNode.text;
	var isopen=true;
	if(a!=0||num!=0){
		rightNodes+=",";
	}
	if(n++>2){
		isopen=false;
	}
	rightNodes+="{title:'"+text+"',isopen:"+isopen+",value:'"+id+"',data:[";
	var children=treeNode.children;
	if(children!=null&&children.length>0){
		for(var i=0;i<children.length;i++){
			showRightTree(children[i],i);
		}
	}
	a++;
	rightNodes+="]}";
}
 
function strToJson(str){
    var json = (new Function("return " + str ))();
    return json;
  }
  
function reloadRole(){
	queryRoleTree();
}

//角色树
function leftTree(){
	layui.use('tree',function(){
		var node=[strToJson(leftNodes.replace("undefined",""))];
		leftOtions={
				elem: '#leftLayout' //传入元素选择器
			    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩				
				,click: function(item){ //点击节点回调
					treeClick(item);
				 }
				,data: node
				
		}	
		$('ul li').remove();
		layui.tree.render(leftOtions);
	});
}
function treeClick(item){n=0;
	$("#roleName").html(item.data.title);
	roleName=item.data.title;
    roleCode=item.data.id;  
    queryRoleFunctionTree(roleCode);
    var cite=document.getElementsByTagName('span');
    var event=window.event||arguments.callee.caller.arguments[0];//消除浏览器差异
    for(var i=0;i<cite.length;i++){
    	if(cite[i]==event.srcElement){
   		   cite[i].classList.add("cite")
     	}else{
   	       cite[i].classList.remove("cite")  
     	}
    }
}
//功能树
function rightTree(){
	layui.use('form',function(){
		var form = layui.form;

        //创建tree
		var node=[strToJson(rightNodes.replace("undefined",""))];
        var xtree = new layuiXtree({
            elem: 'layui-xtree-demo1' //放xtree的容器（必填）

             , form: form              //layui form对象 （必填）

             , data: node              //数据，结构请参照下面 （必填）

             , isopen: true            //初次加载时全部展开，默认true （选填）

             , color: "#000"           //图标颜色 （选填）

             , icon: {                 //图标样式 （选填）

                 open: "&#xe625;"      //节点打开的图标

                 , close: "&#xe623;"   //节点关闭的图标

                 , end: "&#xe621;"     //末尾节点的图标

             }
        });
        
       #if(vs.funcMap.get("sys_role_save_function"))
        document.getElementById('saveRoleFunc').onclick = function () {
        	if(roleCode==null||roleCode=="sys"){
        		layer.msg("请选择角色");
        		return;
        	}
        	//获取全部选中的节点checkbox对象
            var oCks = xtree.GetChecked(); 
            var funcs=new Array();
            for (var i = 0; i < oCks.length; i++) {
            	funcs[i]=oCks[i].value;
            }

            $.ajax({
           	url:'#(path)/portal/core/sysRole/saveRoleFunction',
           	type:'POST',
           	data:{
           		"roleCode":roleCode,
           		"funcs":funcs.toString()
           	},
           	success:function(data){
           		layer.msg(data.msg);
           	}
           });
        } 
     #end
	})
}

//查询角色功能树
function queryRoleFunctionTree(roleCode){
	rightNodes="";
	$.ajax({
       	url:'#(path)/portal/core/sysFunc/roleFuncTree',
       	type:'POST',
       	data:{
       		"roleCode":roleCode,
       		"type":"parentRoleCode"
       	},
       	success:function(data){
       		if(data.length>0){
	    		var treeNode=data[0];
	    		treeNodes=treeNode;
	    		showRightTree(treeNode,0);
	    		rightTree();
	    	}
       		queryRoleFuncParent(roleCode);
       	},
    });
}

//查询上级角色功能，限制下级功能选择
function queryRoleFuncParent(roleCode){
	$.ajax({
		url:'#(path)/portal/core/sysRole/queryRoleFuncByParentId',
		type:'POST',
		data:{
			"id":roleCode,
			"type":"parentRoleCode"
		},
		success:function(data){
			//获取所有节点
			var xtree_all = document.getElementsByClassName('layui-xtree-item');
			var cks = document.getElementsByClassName('layui-xtree-checkbox');

		     for (var i = 0; i < cks.length; i++) {
		    	 var value=cks[i].value;
        		 cks[i].disabled=true;		
        		 xtree_all[i].getElementsByClassName('layui-unselect layui-form-checkbox')[0].classList.add('disabled');	
	        	 if(data.list.length>0){
		        	 for(var j=0;j<data.list.length;j++){
		        		 var funcId=data.list[j].function_id;
		        		 if(value==funcId){			        			
		        			 cks[i].disabled=false;
					    	 xtree_all[i].getElementsByClassName('layui-unselect layui-form-checkbox')[0].classList.remove('disabled');	
		        		 }
		        	 }		        		 
	        	 }  	
		     }
		     
			queryRoleFunc(roleCode);
		}
	})
}

//查询角色功能，是否选中状态
function queryRoleFunc(roleCode){	
	$.ajax({
		url:'#(path)/portal/core/sysRole/queryRoleFunction',
		type:'POST',
		data:{
			"id":roleCode,
			"type":"roleCode"
		},
		success:function(data){
			//获取所有节点
			var xtree_all = document.getElementsByClassName('layui-xtree-item');
			var cks = document.getElementsByClassName('layui-xtree-checkbox');
			//移除选中状态
			for(var a=0;a<xtree_all.length;a++){
				xtree_all[a].getElementsByClassName('layui-xtree-checkbox')[0].checked=false;
	       	 	xtree_all[a].getElementsByClassName('layui-unselect layui-form-checkbox')[0].classList.remove('layui-form-checked');				
			}
			
		     for (var i = 0; i < cks.length; i++) {
		    	 var value=cks[i].value
		    	 //添加选中状态
	        	 if(data.list.length>0){
		        	 for(var j=0;j<data.list.length;j++){
		        		 var funcId=data.list[j].function_id;
		        		 if(value==funcId){
		        			 xtree_all[i].getElementsByClassName('layui-xtree-checkbox')[0].checked=true;
				        	 xtree_all[i].getElementsByClassName('layui-unselect layui-form-checkbox')[0].classList.add('layui-form-checked');
		        		 }
		        	 }		        		 
	        	 }  
		     }

		}
	})
}
</script>

#end